<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
      <el-tab-pane label="巡查事件统计" name="1"></el-tab-pane>
      <!--      <el-tab-pane label="质检扣分统计" name="2"></el-tab-pane>-->
      <el-tab-pane label="事件类型报表" name="3"></el-tab-pane>
    </el-tabs>

    <div class="content">
      <div class="left">
        <Tree ref="TreeRef" @change="onChangeTree" @onLoad="onLoadTree"></Tree>
      </div>

      <div class="right over-scroll">
        <div class="mb20" style="width: 100%;overflow: hidden">
          <el-row :gutter="20">
            <el-col :span="6">
              <SelectDateRange :start.sync="req.startTime" :end.sync="req.endTime" @change="search"></SelectDateRange>
            </el-col>
            <el-col v-if="activeName == '3'" :span="3">
              <el-select v-model="req.field" style="width: 100%;" placeholder="请选择" @change="search">
                <el-option v-for="item in [{label: '事件类型',value: 'category'},{label: '问题类型', value: 'type'}, {label: '详细类型', value: 'subType'}]" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
              <el-button v-if="activeName == '3'" type="warning" @click="down">导出</el-button>
            </el-col>
          </el-row>
        </div>
        <Table :table-data="tableData" v-if="activeName=='3'" :eventType="req.field"></Table>
        <el-table v-else :data="tableData" border>
          <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="部门" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cnt" label="总数量（张)" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="finished" label="已完结（张）" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="expired" label="逾期单据数量（张)" align="left" show-overflow-tooltip></el-table-column>
          <!-- <el-table-column label="操作" width="100" align="center">
            <template slot-scope="{ row }">
              <el-button @click="see(row)" type="text" size="small">详情</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import Table from "./components/table.vue";
import { getCountDeptChildren, getCountByDeptAndType } from "@/api/flow";
import { handleNum } from "@/utils";
export default {
  components: { Table },
  data() {
    return {
      activeName: "1",
      tree: [],
      req: {
        field: null,
        page: 1,
        pageSise: 20,
      },
      tableData: [],
      group: null,
    };
  },
  mounted() {},
  methods: {
    onLoadTree(data) {
      console.log(data);
      if (data && data.length) {
        const item = data[0];
        this.group = {
          groupId: item.id,
          groupPath: item.path,
          groupName: item.name,
        };
        this.$refs["TreeRef"].setCurrentKey(item.path);
        this.search();
      }
    },
    search() {
        this.tableData = []
      if (this.activeName == "1") {
        this.getList();
      } else {
        this.getCountDept();
      }
    },
    handleTabClick() {
      this.search();
    },
    onChangeTree(data) {
      this.group = data;
      this.search();
    },
    getList() {
      if (!this.group) return;
      this.req.path = this.group.groupPath;
      this.req.field = null;
      getCountDeptChildren(this.req).then((res) => {
        this.tableData = res.data;
        this.$forceUpdate()
      });
    },
    getCountDept() {
      getCountByDeptAndType(this.req).then((res) => {
        if (res.data && res.data.length) {
          let total = 0,
            timelyTotal = 0,
            complateTotal = 0,
            passTotal = 0;

          res.data.forEach((item) => {
            total += item.cnt;
            timelyTotal += item.finishedNotExpired;
            complateTotal += item.finished;
            passTotal += item.audit;
          });

          console.log(total, timelyTotal, complateTotal, passTotal);

          res.data.forEach((item) => {
            // 及时完工率
            item.timelyRate = handleNum((item.finishedNotExpired / item.cnt) * 100);
            // 完工率
            item.completionRate = handleNum((item.finished / item.cnt) * 100);
            // 合格率
            item.passRate = handleNum((item.audit / item.cnt) * 100);

            item.totalTimelyRate = handleNum((timelyTotal / total) * 100);
            item.totalCompletionRate = handleNum((complateTotal / total) * 100);
            item.totalPassRate = handleNum((passTotal / total) * 100);
          });

          this.tableData = res.data;
        } else {
          this.tableData = [];
        }

        this.$forceUpdate()
      });
    },
    down() {},
    see() {
      this.goPath("eventLayout", "/eventManage", { content: "333333333333" });
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  display: flex;
  .left {
    width: 300px;
    height: calc(100vh - 200px);
    overflow: auto;
    flex-shrink: 0;
    margin-right: 20px;
    .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content {
      background-color: rgb(83, 143, 252);
      color: #fff;
      border-radius: 3px;
    }
  }
  .right {
    flex: 1;
    height: calc(100vh - 200px);
    .flex-warp {
      display: flex;
    }
  }
}
</style>
